<<<<<<< HEAD
import React, { useState } from "react";
=======
import React, { useState, useEffect } from "react";
>>>>>>> 503b0544130247b48d86f53bc47ed722f01e5c05
import {
  View,
  StyleSheet,
  Image,
  Text,
<<<<<<< HEAD
  TouchableOpacity,
  ScrollView,
  RefreshControl
=======
  AsyncStorage,
  TouchableOpacity,
  ActivityIndicator
>>>>>>> 503b0544130247b48d86f53bc47ed722f01e5c05
} from "react-native";
import { colors } from "../Style/Colors";
import { hp } from "../Style/responsive";
import Options from "../Components/Options";
import Header from "../Components/Header";
import { setFontSize } from "../Components/SetSize";
import UserData from "../Data/UserData";
import Icon from "react-native-vector-icons/MaterialCommunityIcons";

export const HSManDashboard = props => {
<<<<<<< HEAD
  const [refreshing, setRefreshing] = useState(false);

  const onChangeDoctor = () => {
    requestAnimationFrame(() => {
      props.navigation.navigate("DoctorList");
    });
  };

  const onOPD = () => {
    requestAnimationFrame(() => {
      props.navigation.navigate("OPD_TabBar");
    });
  };

  const onIPD = () => {
    requestAnimationFrame(() => {
      props.navigation.navigate("IPD_TabBar");
    });
  };

  const onDischarge = () => {
    requestAnimationFrame(() => {
      props.navigation.navigate("Discharge");
    });
  };

  const onSearch = () => {
    requestAnimationFrame(() => {
      props.navigation.navigate("Search");
    });
  };

  const onRefresh = () => {
    setRefreshing(true);
    props.navigation.navigate("FetchData");
    setRefreshing(false);
  };

  const {
    data,
    housemanData,
    opdList,
    dischargeList,
    ipdList,
    ipdCount
  } = UserData;
  return (
    <View styles={styles.container}>
      <Header text="DASHBOARD" isLogoutIcon={true} />
      <ScrollView
        refreshControl={
          <RefreshControl
            colors={[colors.primaryColor]}
            refreshing={refreshing}
            onRefresh={onRefresh}
          />
        }
      >
        <View style={styles.profileContainer}>
          <View style={styles.profile}>
            <Image
              style={styles.imgStyle}
              source={{
                uri:
                  "http://www.teainconline.com/uploads/images/tea-male-avatar.jpg"
              }}
            />

            <View style={styles.profileNameWrapper}>
              <Text style={styles.name}>
                {housemanData.NAME} {housemanData.MIDDLENAME}{" "}
                {housemanData.LASTNAME}
              </Text>
              <TouchableOpacity
                onPress={onChangeDoctor}
                style={{ flexDirection: "row", alignItems: "center" }}
              >
                <Text style={styles.name}>{data.DrName}</Text>
                <Icon
                  name="menu-down"
                  style={{ marginLeft: 6 }}
                  size={26}
                  color={colors.whiteColor}
                />
              </TouchableOpacity>
              <Text style={styles.profession}>{data.Qualification}</Text>
              {/* <Text style={styles.profession}>{data.Department}</Text> */}
            </View>
          </View>
          <View style={styles.ipdCountWrapper}>
            <Text style={styles.ipdText}>Total IPD </Text>
            <Text style={styles.ipdText}>{ipdCount}</Text>
=======
  const [data, setData] = useState([]);
  const [currentDoctor, setCurrentDoctor] = useState([]);
  const [isLoading, setIsLoading] = useState(true);

  const onChangeDoctor = () => {
    props.navigation.navigate("DoctorList");
  };

  const onOPD = () => {
    props.navigation.navigate("OPD_TabBar");
  };

  const onIPD = () => {
    props.navigation.navigate("IPD_TabBar");
  };

  const onDischarge = () => {
    props.navigation.navigate("Discharge");
  };

  useEffect(() => {
    console.log("HSMANDASHBOARD Render");
    AsyncStorage.getItem("user-data").then(value => {
      AsyncStorage.getItem("current-data").then(current => {
        if (value && current) {
          const data = JSON.parse(value);
          const currentDoctor = JSON.parse(current);
          // alert(JSON.stringify(currentDoctor));
          setData(data);
          setCurrentDoctor(currentDoctor);
          setIsLoading(false);
        } else {
          props.navigation.navigate("Auth");
        }
      });
    });
  }, [currentDoctor]);

  const onSearch = () => {
    props.navigation.navigate("Search");
  };

  if (isLoading) {
    return (
      <View
        style={{
          flex: 1,
          justifyContent: "center",
          alignItems: "center",
          backgroundColor: colors.whiteColor
        }}
      >
        <ActivityIndicator size="large" color={colors.primaryColor} />
      </View>
    );
  } else {
    return (
      <View styles={styles.container}>
        <View style={styles.profile}>
          <Image
            style={styles.imgStyle}
            source={require("../assets/doctor.png")}
          />
          <View style={styles.profileNameWrapper}>
            <Text style={styles.name}>
              {data.NAME} {data.MIDDLENAME} {data.LASTNAME}
            </Text>
            <TouchableOpacity onPress={onChangeDoctor}>
              <Text style={styles.name}>{currentDoctor.DrName}</Text>
            </TouchableOpacity>
            <Text style={styles.profession}>{currentDoctor.Qualification}</Text>
>>>>>>> 503b0544130247b48d86f53bc47ed722f01e5c05
          </View>
        </View>
        <View style={styles.dashboard}>
          <View style={styles.dashboardOptions}>
            <Options
              name="OPD"
              imgPath={require("../assets/OPD.png")}
              onClick={onOPD}
<<<<<<< HEAD
              no={opdList.length}
=======
>>>>>>> 503b0544130247b48d86f53bc47ed722f01e5c05
            />
            <Options
              name="IPD"
              imgPath={require("../assets/IPD.png")}
              onClick={onIPD}
<<<<<<< HEAD
              no={ipdList.length}
=======
>>>>>>> 503b0544130247b48d86f53bc47ed722f01e5c05
            />
          </View>
          <View style={styles.dashboardOptions}>
            <Options
              name="SEARCH"
              onClick={onSearch}
              imgPath={require("../assets/search.png")}
            />
            <Options
              name="DISCHARGE"
              onClick={onDischarge}
              imgPath={require("../assets/Discharge.png")}
              no={dischargeList.length}
            />
          </View>
        </View>
<<<<<<< HEAD
      </ScrollView>
    </View>
  );
=======
      </View>
    );
  }
>>>>>>> 503b0544130247b48d86f53bc47ed722f01e5c05
};
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "red",
    justifyContent: "space-between"
  },
  profileContainer: {
    backgroundColor: colors.primaryColor,
    padding: 4,
    marginBottom: 20,
    height: hp("24%")
  },
  profile: {
    alignItems: "center",
    flexDirection: "row",
    paddingHorizontal: 10
  },
  imgStyle: {
<<<<<<< HEAD
    width: 50,
    height: 50,
    borderRadius: 25
  },
  profileNameWrapper: {
    marginHorizontal: 10
  },
  name: {
    fontSize: setFontSize("2.8", "2.2"),
=======
    width: wp("14%"),
    height: hp("8%")
  },
  profileNameWrapper: {
    marginHorizontal: 20,
    justifyContent: "center",
    alignItems: "center"
  },
  name: {
    fontSize: setFontSize("2.8", "2.4"),
>>>>>>> 503b0544130247b48d86f53bc47ed722f01e5c05
    color: colors.whiteColor,
    marginVertical: 4
  },
  profession: {
<<<<<<< HEAD
    fontSize: setFontSize("2.4", "2"),
    color: colors.whiteColor,
    marginVertical: 4
=======
    fontSize: setFontSize("2.6", "2.2"),
    color: colors.lightGrey,
    textAlign: "center"
>>>>>>> 503b0544130247b48d86f53bc47ed722f01e5c05
  },
  dashboard: {
    justifyContent: "center",
    alignItems: "center"
  },
  dashboardOptions: {
    flexDirection: "row"
  },
  ipdCountWrapper: {
    flexDirection: "row",
    justifyContent: "space-around",
    margin: 20
  },
  ipdText: {
    fontSize: 24,
    color: colors.whiteColor,
    fontWeight: "bold"
  }
});

export default HSManDashboard;
